<template>
  <el-card class="single">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="题目" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <span>评分类型</span>
        <el-select
          v-model="form.grade_type"
          placeholder="请选择"
          @change="changeForm"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-checkbox v-model="form.must" style="margin-left: 20px"
          >必填</el-checkbox
        >
      </el-form-item>
      <!-- <el-form-item>
        <span>评分范围</span>
        <el-input-number
          v-model="form.range"
          :min="2"
          :max="999"
          size="mini"
        ></el-input-number>
        <span>起始数值</span>
        <el-input-number
          v-model="form.start"
          :min="1"
          :max="999"
          size="mini"
        ></el-input-number>
      </el-form-item> -->
      <el-form-item v-if="form.grade_type == 4">
        <span>程度</span>
        <el-input
          v-model="form.degree_min"
          placeholder="请输入内容"
          class="degree"
        ></el-input>
        <span>-</span>
        <el-input
          v-model="form.degree_max"
          placeholder="请输入内容"
          class="degree"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  export default {
    props: {
      closePanel: Function,
      questionnaire_id: Number,
      getQuestionnaire: Function,
      addQuestion: Function,
    },
    data() {
      return {
        form: {
          title: "",
          must: true,
          remark: "",
          questionnaire_id: null,
          question_id: null,
          username: localStorage.getItem("username"),
          type: "grade",
          grade_type: 1,
          degree_min: "非常不满意",
          degree_max: "非常满意",
          range: 5,
          start: 1,
        },
        rules: {
          title: [{ required: true, message: "请输入题目名称", trigger: "blur" }],
        },
        options: [
          {
            value: 1,
            label: "满意度",
          },
          {
            value: 2,
            label: "认同度",
          },
          {
            value: 3,
            label: "重要度",
          },
          {
            value: 4,
            label: "自定义",
          },
        ],
        changeList: [
          {
            value: 1,
            left: "非常不满意",
            right: "非常满意",
          },
          {
            value: 2,
            left: "非常不认同",
            right: "非常认同",
          },
          {
            value: 3,
            left: "非常重要",
            right: "非常不重要",
          },
        ],
        timer: null,
      };
    },
    created() {
      this.form.questionnaire_id = this.questionnaire_id;
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //   执行提交
            // axios.post("questions/", this.form).then((response) => {
            //   console.log('grade传过去的表格')
            //   console.log(this.form)
            //   console.log(response.status);
            //   console.log(response.data);
            // });

            // 这里进行新建问题后的提交
            // 调用父组件的方法
            // 给后端传完整的问卷
            this.form["id"] = null;
            this.form["detail"] = {
              degree_min: this.form.degree_min,
              degree_max: this.form.degree_max,
              range: this.form.range,
              start: this.form.start,
              grade_type: this.form.grade_type
            };
            console.log('form')
            console.log(this.form)
            this.addQuestion(this.form);
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
              this.getQuestionnaire();
              this.closePanel();
            }, 200);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      cancel() {
        this.closePanel();
      },
      changeForm(value) {
        if (value == 4) {
          this.form.degree_min = "";
          this.form.degree_max = "";
        }
        for (var i = 0; i < this.changeList.length; i++) {
          if (this.changeList[i].value == value) {
            this.form.degree_min = this.changeList[i].left;
            this.form.degree_max = this.changeList[i].right;
          }
        }
      },
    },
  };
</script>

<style scoped>
.el-input {
  width: 70%;
}

.el-form-item {
  display: flex;
  justify-content: center;
}

span {
  margin-right: 5px;
  margin-left: 5px;
}

.degree {
  width: 30%;
}
</style>